<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    {% if nav_tab == "hot" or nav_tab == "" %}
        热门机构
    {% endif %}
    {% if nav_tab == "all" %}
        所有机构
    {% endif %}

{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        <div class="columns is-multiline">
            {# 切换导航栏 #}
            <div class="column is-full">
                <div class="tabs is-centered">
                    <ul>
                        <li class="{% if nav_tab == "hot" or nav_tab == "" %} is-active {% endif %}">
                            <a href="{% url 'org:list' %}?nav_tab=hot">
                                <span>
                                    <strong>
                                        热&nbsp;门&nbsp;机&nbsp;构
                                        {% if nav_tab == "hot" or nav_tab == "" %}
                                            【共&nbsp;{{ org_hot_nums }}&nbsp;家】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                        <li class="{% if nav_tab == "all" %} is-active {% endif %}">
                            <a href="{% url 'org:list' %}?nav_tab=all">
                                <span>
                                    <strong>
                                        所&nbsp;有&nbsp;机&nbsp;构
                                        {% if nav_tab == "all" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;家】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            {% if nav_tab == "hot" or nav_tab == "" %}
                {# 热门机构： #}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 机构列表 #}
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {% for org in orgs_hot.object_list %}
                                    <div class="column is-4-desktop">
                                        <div class="card">
                                            <div class="card-image">
                                                <a href="{% url 'org:home' org.id %}">
                                                    <figure class="image is-16by9">
                                                        <img src="{{ MEDIA_URL }}{{ org.org_logo }}"
                                                             alt="Placeholder image">
                                                    </figure>
                                                </a>
                                            </div>
                                            <div class="card-content has-background-primary">
                                                <div class="media">
                                                    <div class="media-content has-text-centered">
                                                        {# 机构名 #}
                                                        <p class="title is-3 has-text-white">
                                                            <a href="{% url 'org:home' org.id %}"
                                                               class="has-text-link-light">{{ org.name }}</a>
                                                        </p>
                                                        <hr>
                                                        {# 机构信息 #}
                                                        <div class="columns is-multiline">
                                                            {# 课程数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        课&nbsp;程&nbsp;数
                                                                        <i class="fa fa-book" aria-hidden="true"></i>
                                                                        ：{{ org.course_num }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 学生数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        学&nbsp;生&nbsp;数
                                                                        <i class="fa fa-address-card"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ org.students }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 收藏数 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        收&nbsp;藏&nbsp;数
                                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                                        ：{{ org.fav_nums }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 机构地址 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        地&nbsp;址
                                                                        <i class="fa fa-map-marker"
                                                                           aria-hidden="true"></i>
                                                                        ：{{ org.address }}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                            {# 经典课程 #}
                                                            <div class="column is-full">
                                                                <span>
                                                                    <strong class="has-text-white">
                                                                        经&nbsp;典&nbsp;课&nbsp;程
                                                                        <i class="fa fa-thumbs-up"
                                                                           aria-hidden="true"></i>：
                                                                        {% if org.courses %}
                                                                            {% for course in org.courses %}
                                                                                {{ course.name }}&nbsp;&nbsp;&nbsp;
                                                                                &nbsp;
                                                                            {% endfor %}
                                                                        {% else %}
                                                                            无
                                                                        {% endif %}
                                                                    </strong>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                                <div class="column is-full">
                                    <nav class="pagination is-rounded is-centered" role="navigation"
                                         aria-label="pagination">

                                        {% if orgs.has_previous %}
                                            <a class="pagination-previous"
                                               href="?{{ orgs.previous_page_number.querystring }}">上一页</a>
                                        {% endif %}
                                        <ul class="pagination-list">
                                            {% for page in orgs.pages %}
                                                {% if page %}
                                                    {% ifequal page orgs.number %}
                                                        <li>
                                                            <a class="pagination-link is-current"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li>
                                                            <a class="pagination-link"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% endifequal %}
                                                {% else %}
                                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                        {% if orgs.has_next %}
                                            <a class="pagination-next"
                                               href="?{{ orgs.next_page_number.querystring }}">
                                                下一页
                                            </a>
                                        {% endif %}
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {# 所有机构： #}
            {% if nav_tab == "all" %}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 筛选条件——机构类型 #}
                        <div class="column is-4 ">
                            <div class="box">
                                <div class="tags are-large is-centered">
                                    <li class="tag is-primary {% ifequal category "" %} is-active {% endifequal %}">
                                        <a href="?nav_tab=all&sort=&category=&city=" class="has-text-link-light">
                                <span>
                                    <strong>
                                        全&nbsp;&nbsp;部
                                        {% ifequal category "institution" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;家】
                                        {% endifequal %}
                                    </strong>
                                </span>
                                        </a>
                                    </li>
                                    <ul>
                                        <li class="tag is-primary {% ifequal category "institution" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&category=institution&city={{ city_id }}"
                                               class="has-text-link-light">
                                <span>
                                    <strong>
                                        培&nbsp;训&nbsp;机&nbsp;构
                                        {% ifequal category "institution" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;家】
                                        {% endifequal %}
                                    </strong>
                                </span>
                                            </a>
                                        </li>
                                        <li class="tag is-primary {% ifequal category "school" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&category=school&city={{ city_id }}" class="has-text-link-light">
                                    <span>
                                        <strong>院&nbsp;校
                                            {% ifequal category "school" %}
                                                【共&nbsp;{{ org_nums }}&nbsp;家】
                                            {% endifequal %}
                                        </strong>
                                    </span>
                                            </a>
                                        </li>
                                        <li class="tag is-primary {% ifequal category "individual" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&category=individual&city={{ city_id }}"
                                               class="has-text-link-light">
                                <span>
                                    <strong>个&nbsp;人&nbsp;讲&nbsp;师
                                        {% ifequal category "individual" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;个】
                                        {% endifequal %}
                                    </strong>
                             </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {# 排序条件 #}
                        <div class="column is-4 ">
                            <div class="box">
                                <div class="tags are-large is-centered">
                                    <ul>
                                        <li class="tag is-primary {% ifequal category "institution" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&category={{ category }}&city={{ city_id }}"
                                               class="has-text-link-light">
                                <span>
                                    <strong>
                                        全&nbsp;&nbsp;部
                                        {% ifequal category "institution" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;家】
                                        {% endifequal %}
                                    </strong>
                                </span>
                                            </a>
                                        </li>
                                        <li class="tag is-primary {% ifequal category "school" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&sort=courses&category={{ category }}&city={{ city_id }}"
                                               class="has-text-link-light">
                                    <span>
                                        <strong>课&nbsp;程&nbsp;数
                                        <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                                            {% ifequal category "school" %}
                                                【共&nbsp;{{ org_nums }}&nbsp;家】
                                            {% endifequal %}
                                        </strong>
                                    </span>
                                            </a>
                                        </li>
                                        <li class="tag is-primary {% ifequal category "individual" %} is-active {% endifequal %}">
                                            <a href="?nav_tab=all&sort=students&category={{ category }}&city={{ city_id }}"
                                               class="has-text-link-light">
                                <span>
                                    <strong>学&nbsp;习&nbsp;人&nbsp;数
                                    <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                                        {% ifequal category "individual" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;个】
                                        {% endifequal %}
                                    </strong>
                             </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {# 筛选条件——所在地区类型 #}
                        <div class="column is-4">
                            <div class="box">
                                <div class="tags are-large is-centered">
                                    <ul>
                                        <li class="tag is-primary">
                                            <a href="?nav_tab=all&sort=&category=&city=" class="has-text-link-light">
                                <span>
                                    <strong>
                                        全&nbsp;&nbsp;部
                                        {% ifequal category "institution" %}
                                            【共&nbsp;{{ org_nums }}&nbsp;家】
                                        {% endifequal %}
                                    </strong>
                                </span>
                                            </a>
                                        </li>
                                        {% for city_item in city %}
                                            <li class="tag is-primary {% ifequal city_id city_item.id|stringformat:'i' %} is-active {% endifequal %}">
                                                <a href="?nav_tab=all&category={{ category }}&city={{ city_item.id }}"
                                                   class="has-text-link-light">
                                        <span>
                                            <strong>
                                                {{ city_item.name }}
                                                {% ifequal city_id city_item.id|stringformat:'i' %}
                                                    【共&nbsp;{{ org_nums }}&nbsp;家】
                                                {% endifequal %}
                                            </strong>
                                        </span>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {# 机构列表 #}
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {% for org in orgs.object_list %}
                                    <div class="column is-3-desktop">
                                        <div class="card">
                                            <div class="card-image">
                                                <a href="{% url 'org:home' org.id %}">
                                                <figure class="image is-16by9">
                                                    <img src="{{ MEDIA_URL }}{{ org.org_logo }}"
                                                         alt="Placeholder image">
                                                </figure>
                                                </a>
                                            </div>
                                            <div class="card-content has-background-success">
                                                <div class="media">
                                                    <div class="media-content has-text-centered">
                                                        {# 机构名 #}
                                                        <p class="title is-3 has-text-white">
                                                            <a href="{% url 'org:home' org.id %}" class="has-text-link-light">
                                                            {{ org.name }}
                                                            </a>
                                                        </p>
                                                        <hr>
                                                        {# 机构信息 #}
                                                        <div class="columns is-multiline">
                                                            {# 课程数 #}
                                                            <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        课&nbsp;程&nbsp;数
                                                        <i class="fa fa-book" aria-hidden="true"></i>
                                                        ：{{ org.course_num }}
                                                    </strong>
                                                </span>
                                                            </div>
                                                            {# 学生数 #}
                                                            <div class="column is-full">
                                            <span>
                                                <strong class="has-text-white">
                                                    学&nbsp;生&nbsp;数
                                                    <i class="fa fa-address-card" aria-hidden="true"></i>
                                                    ：{{ org.students }}
                                                </strong>
                                            </span>
                                                            </div>
                                                            {# 收藏数 #}
                                                            <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        收&nbsp;藏&nbsp;数
                                                        <i class="fa fa-star" aria-hidden="true"></i>
                                                        ：{{ org.fav_nums }}
                                                    </strong>
                                                </span>
                                                            </div>
                                                            {# 机构地址 #}
                                                            <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        地&nbsp;址
                                                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                        ：{{ org.address }}
                                                    </strong>
                                                </span>
                                                            </div>
                                                            {# 经典课程 #}
                                                            <div class="column is-full">
                                                <span>
                                                    <strong class="has-text-white">
                                                        经&nbsp;典&nbsp;课&nbsp;程
                                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                                        ：C++从入门到精通
                                                    </strong>
                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                                <div class="column is-full">
                                    <nav class="pagination is-rounded is-centered" role="navigation"
                                         aria-label="pagination">

                                        {% if orgs.has_previous %}
                                            <a class="pagination-previous"
                                               href="?{{ orgs.previous_page_number.querystring }}">上一页</a>
                                        {% endif %}
                                        <ul class="pagination-list">
                                            {% for page in orgs.pages %}
                                                {% if page %}
                                                    {% ifequal page orgs.number %}
                                                        <li>
                                                            <a class="pagination-link is-current"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li>
                                                            <a class="pagination-link"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% endifequal %}
                                                {% else %}
                                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                        {% if orgs.has_next %}
                                            <a class="pagination-next"
                                               href="?{{ orgs.next_page_number.querystring }}">
                                                下一页
                                            </a>
                                        {% endif %}
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
    </main>

{% endblock %}